<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS Patterns: Media Object</title>
    <style>
        .media {
            max-width: 1080px;
        }

        .media .img {
            float: left;
            margin-right: 10px;
        }

        .media .imgExt {
            float: right;
            margin-left: 10px;
        }

        .media .imgExt img {
            display: block;
        }

        .media .img img {
            display: block;
        }
    </style>
</head>
<body>
<!-- Exercise instructions: This exercise will deep-dive into one type
     CSS pattern.

          a. OOCSS
 -->
<section class="media">
    <div class="img">
        <img src="http://lorempixel.com/100/100/abstract/1" alt="Picture"/>
    </div>

    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem explicabo, in incidunt laudantium maxime pariatur possimus qui quisquam repellendus sequi sit tempore ut voluptate voluptatum. Id maxime non quibusdam?</span><span>Dignissimos distinctio exercitationem, expedita incidunt labore libero maxime, nihil omnis quibusdam quos repellendus, rerum saepe sapiente similique suscipit tempora tempore ullam ut vel vitae! Beatae consequatur molestiae nostrum perferendis repellat?</span><span>Animi assumenda blanditiis, consectetur corporis ea eveniet fugiat fugit illum, ipsa maiores neque nulla porro provident quasi quia quisquam repellendus sapiente, sed tempora vel vero voluptas voluptates? Beatae, officia, perspiciatis.</span></p>
</section>
<section class="media">
    <div class="img">
        <img src="http://lorempixel.com/100/100/abstract/2" alt="Picture"/>
    </div>

    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem explicabo, in incidunt laudantium maxime pariatur possimus qui quisquam repellendus sequi sit tempore ut voluptate voluptatum. Id maxime non quibusdam?</span></p>
    <section class="media">
        <div class="img">
            <img src="http://lorempixel.com/100/100/abstract/4" alt="Picture"/>
        </div>

        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem explicabo, in incidunt laudantium maxime pariatur possimus qui quisquam repellendus sequi sit tempore ut voluptate voluptatum. Id maxime non quibusdam?</span><span>Dignissimos distinctio exercitationem, expedita incidunt labore libero maxime, nihil omnis quibusdam quos repellendus, rerum saepe sapiente similique suscipit tempora tempore ullam ut vel vitae! Beatae consequatur molestiae nostrum perferendis repellat?</span><span>Animi assumenda blanditiis, consectetur corporis ea eveniet fugiat fugit illum, ipsa maiores neque nulla porro provident quasi quia quisquam repellendus sapiente, sed tempora vel vero voluptas voluptates? Beatae, officia, perspiciatis.</span></p>
    </section>

</section>
<section class="media">
    <div class="imgExt">
        <img src="http://lorempixel.com/100/100/abstract/3" alt="Picture"/>
    </div>

    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem explicabo, in incidunt laudantium maxime pariatur possimus qui quisquam repellendus sequi sit tempore ut voluptate voluptatum. Id maxime non quibusdam?</span><span>Dignissimos distinctio exercitationem, expedita incidunt labore libero maxime, nihil omnis quibusdam quos repellendus, rerum saepe sapiente similique suscipit tempora tempore ullam ut vel vitae! Beatae consequatur molestiae nostrum perferendis repellat?</span><span>Animi assumenda blanditiis, consectetur corporis ea eveniet fugiat fugit illum, ipsa maiores neque nulla porro provident quasi quia quisquam repellendus sapiente, sed tempora vel vero voluptas voluptates? Beatae, officia, perspiciatis.</span></p>
</section>


</body>
</html>